<template>
	<view class="wrapper">
		<u-loading-page loadingColor="#e3230e" iconSize="40" :loading="!pageLoading"></u-loading-page>
		<view class="subject-header">
			<menu-header>
				<view class="subject-header-box main-flex">
					<uni-icons type="back" size="30" color="#FFFFFF" @click="goBack"></uni-icons>
				</view>
			</menu-header>
		</view>
		<view class="subject" :style="{ backgroundColor: bgColor }">
			<!-- <canvas
				class="subject-canvas"
				canvas-id="myCanvas"
				:style="{ 
					width: `${canvasW}px`,
					height: `${canvasH}px`
				}"></canvas> -->
			<view class="subject-bg">
				<image class="subject-bg-img" :src="imgUrl(info.img)" mode="widthFix"></image>
			</view>
			<view class="subject-content">
				<!-- <view class="subject-content-title" v-if="info?.title">{{info.title}}</view> -->
				<view class="subject-content-sub" :style="{backgroundColor: bgColor}" v-if="info?.subTitle">
					<text class="subject-content-sub-text">{{info.subTitle}}</text>
				</view>
				<view class="subject-content-product main-flex" v-if="info?.products">
					<view class="product-box" v-for="(item, index) in info.products" :key="index">
						<goods-item-subject :column="3" @chooseGoods="chooseGoods" :goods="item"></goods-item-subject>
					</view>
				</view>
			</view>
		</view>
		
		<!--商品弹窗-->
		<goods-popup
		@close="closeGoods"
		:showGoods="showGoods"
		:goods="goodsInfo"></goods-popup>
		
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { spreadSubjectDetail } from "@/api/app_api/index"
import { productInfo } from '../../api/app_api/product';

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	// 页面加载
	const pageLoading = ref(false)
	const id = ref('')
	const regionCode = ref('')
	const name = ref('')
	const info = ref({})
	const bgColor = ref('#FFFFFF')
	const getDetail = () => {
		const params = {
			sellChannel: userStore.sellChannel
		}
		if (id.value) {
			params.id = id.value
		} else if (regionCode.value && name.value) {
			params.regionCode = regionCode.value
			params.name = name.value
		}
		spreadSubjectDetail(params).then(res => {
			info.value = res.data
			pageLoading.value = true
			if (res?.data?.color) {
				bgColor.value = res?.data?.color
			}
			// else {
			// 	getImageThemeColor(res.data.img)
			// }
			uni.setNavigationBarTitle({
				title: res?.data?.title || '专题'
			})
		})
	}
	
	// const canvasW = ref(200)
	// const canvasH = ref(200)
	// const getImageThemeColor = (imageUrl) => {
	// 	uni.getImageInfo({
	// 		src: imageUrl,
	// 		success: function (img) {
	// 			// console.log(img)
	// 			canvasW.value = img.width
	// 			canvasH.value = img.height
	// 			const ctx = uni.createCanvasContext('myCanvas');
	// 			ctx.drawImage(img.path, 0, 0, img.width, img.height);
	// 			ctx.draw(true, () => {
	// 				uni.canvasGetImageData({
	// 					canvasId: 'myCanvas',
	// 					x: 0,
	// 					y: 0,
	// 					width: img.width,
	// 					height: img.height,
	// 					success: (imageData) => {
	// 						const themeColor = calculateThemeColor(imageData.data)
	// 						bgColor.value = themeColor
	// 						pageLoading.value = true
	// 						console.log('图片主题色:', themeColor)
	// 					},
	// 					fail: (err1) => {
	// 						pageLoading.value = true
	// 						// console.error('获取图片数据失败:', err1)
	// 					}
	// 				})
	// 			})
	// 		},
	// 		fail: (err) => {
	// 			pageLoading.value = true
	// 		}
	// 	})
	// }
	// const calculateThemeColor = (imageData) => {
	// 	let r = 0, g = 0, b = 0, count = 0;
	// 	for (let i = 0; i < imageData.length; i += 4) {
	// 			r += imageData[i];
	// 			g += imageData[i + 1];
	// 			b += imageData[i + 2];
	// 			count++;
	// 	}
	// 	r = Math.floor(r / count);
	// 	g = Math.floor(g / count);
	// 	b = Math.floor(b / count);
	// 	// 增加透明度
	// 	return `rgba(${r}, ${g}, ${b}, 0.8)`;// 0.8是手动加的，为了增加点透明度
	// }
	
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	
	// 选择商品
	const showGoods = ref(false)
	const goodsInfo = ref({})
	const chooseGoods = (item) => {
		showGoods.value = true
		goodsInfo.value = {
			...item,
			name: item.productSubjectName,
			id: item.productId,
			moreSpec: 0,
			regionCode: info.value.regionCode
		}
	}
	const closeGoods = () => {
		showGoods.value = false
		goodsInfo.value = {}
	}
	
	// 监听
	watch(() => userStore.sellChannel, (newVal, oldVal) => {
		getDetail()
	})
	
	onPullDownRefresh(() => {
		getDetail()
		uni.stopPullDownRefresh()
	})
	
	onLoad((option) => {
		if(option.id) {
			id.value = option.id
			getDetail()
		} else if (option.name && option.regionCode) {
			name.value = option.name
			regionCode.value = option.regionCode
			getDetail()
		}
	})
	
</script>

<style lang="scss">
	.subject {
		min-height: 100vh;
		&-header {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 10;
			box-sizing: border-box;
			padding: 12rpx 0;
			// #ifdef MP-WEIXIN
			padding-top: 0;
			// #endif
		}
		&-title {
			font-size: 32rpx;
			font-weight: 600;
			text-align: center;
		}
		&-bg {
			font-size: 0;
			&-img {
				width: 100%;
			}
		}
		&-content {
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			&-sub {
				font-size: 36rpx;
				text-align: center;
				padding: 20rpx;
				letter-spacing: 10rpx;
				font-weight: bold;
				&-text {
					mix-blend-mode: difference;
					color: #ffffff;
				}
				// text-shadow: 
				// 	-1px -1px 0 red,  
				// 	 1px -1px 0 red,
				// 	-1px  1px 0 red,
				// 	 1px  1px 0 red; /* 四个方向的阴影 */
			}
			&-product {
				flex-wrap: wrap;
				margin: 0 -10rpx;
				.product-box {
					width: 33.333%;
					padding: 10rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>
